<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 经纬度分析</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <script src="./static/vendor/js/chart-4.5.0.js"></script>
    <script src="./static/vendor/js/leaflet-1.9.4.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 地图容器 */
        #map {
            height: 600px;
            border-radius: 0.75rem;
            overflow: hidden;
        }

        /* 筛选面板 */
        .filter-panel {
            transition: all 0.3s ease;
        }
        .filter-panel.collapsed {
            transform: translateX(-100%);
        }

        /* 地图标记弹窗 */
        .custom-popup .leaflet-popup-content-wrapper {
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        /* 统计卡片 */
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        /* 热力图图例 */
        .heatmap-legend {
            background: linear-gradient(to right, 
                rgba(0, 0, 255, 0) 0%, 
                rgba(0, 0, 255, 0.5) 25%, 
                rgba(0, 255, 0, 0.5) 50%, 
                rgba(255, 255, 0, 0.5) 75%, 
                rgba(255, 0, 0, 0.8) 100%);
        }

        /* 标记点动画 */
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.5;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }
        .pulse-marker {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">经纬度分析</h2>
                        <p class="text-sm text-slate-500">基于地理位置的信访数据可视化分析</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i class="fas fa-layer-group mr-2"></i>切换图层
                        </button>
                        <button class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            <i class="fas fa-expand mr-2"></i>全屏
                        </button>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 筛选条件面板 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-slate-800">筛选条件</h3>
                        <button id="toggleFilter" class="text-slate-500 hover:text-slate-700">
                            <i class="fas fa-chevron-up"></i>
                        </button>
                    </div>
                    
                    <div id="filterContent" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                        <!-- 任务结果选择 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">任务结果</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部任务</option>
                                <option>任务一 - 2024年1月</option>
                                <option>任务二 - 2023年12月</option>
                            </select>
                        </div>

                        <!-- 时间范围 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>最近7天</option>
                                <option>最近30天</option>
                                <option>最近90天</option>
                                <option>自定义</option>
                            </select>
                        </div>

                        <!-- 区域选择 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">区域</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部区域</option>
                                <option>福田区</option>
                                <option>罗湖区</option>
                                <option>南山区</option>
                                <option>宝安区</option>
                                <option>龙岗区</option>
                                <option>盐田区</option>
                            </select>
                        </div>

                        <!-- 一级污染类型 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">一级污染类型</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部类型</option>
                                <option>环境污染</option>
                                <option>噪音扰民</option>
                                <option>市容管理</option>
                                <option>交通问题</option>
                            </select>
                        </div>

                        <!-- 二级污染类型 -->
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">二级污染类型</label>
                            <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                <option>全部子类型</option>
                                <option>空气污染</option>
                                <option>水污染</option>
                                <option>土壤污染</option>
                                <option>施工噪音</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex justify-end mt-4 space-x-3">
                        <button class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            重置
                        </button>
                        <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            应用筛选
                        </button>
                    </div>
                </div>

                <!-- 统计概览 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">总标记点</p>
                                <p class="text-2xl font-bold text-indigo-600 mt-1">892</p>
                            </div>
                            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-map-marker-alt text-indigo-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">热点区域</p>
                                <p class="text-2xl font-bold text-red-600 mt-1">12</p>
                            </div>
                            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-fire text-red-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">平均密度</p>
                                <p class="text-2xl font-bold text-green-600 mt-1">45/km²</p>
                            </div>
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-chart-area text-green-600 text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">覆盖区域</p>
                                <p class="text-2xl font-bold text-purple-600 mt-1">6区</p>
                            </div>
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-globe text-purple-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 地图和图例 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-slate-800">地理分布图</h3>
                        <div class="flex items-center space-x-4">
                            <!-- 图例 -->
                            <div class="flex items-center space-x-3">
                                <span class="text-sm text-slate-600">密度:</span>
                                <div class="flex items-center space-x-1">
                                    <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
                                    <span class="text-xs text-slate-500">低</span>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <div class="w-4 h-4 bg-yellow-500 rounded-full"></div>
                                    <span class="text-xs text-slate-500">中</span>
                                </div>
                                <div class="flex items-center space-x-1">
                                    <div class="w-4 h-4 bg-red-500 rounded-full"></div>
                                    <span class="text-xs text-slate-500">高</span>
                                </div>
                            </div>
                            <!-- 图层切换 -->
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-lg">标记点</button>
                                <button class="px-3 py-1 text-sm hover:bg-slate-100 rounded-lg">热力图</button>
                                <button class="px-3 py-1 text-sm hover:bg-slate-100 rounded-lg">聚类</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 地图容器 -->
                    <div id="map"></div>
                </div>

                <!-- 详细列表 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mt-6">
                    <h3 class="text-lg font-semibold text-slate-800 mb-4">附近信访点</h3>
                    
                    <div class="space-y-3">
                        <div class="flex items-center justify-between p-4 border border-slate-200 rounded-lg hover:bg-slate-50">
                            <div class="flex items-center space-x-4">
                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">福田区梅林街道工厂废气排放</h5>
                                    <p class="text-sm text-slate-500">22.5432°N, 114.0579°E | 环境污染</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <span class="px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">高密度</span>
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-location-arrow"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex items-center justify-between p-4 border border-slate-200 rounded-lg hover:bg-slate-50">
                            <div class="flex items-center space-x-4">
                                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-volume-up text-yellow-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">南山区沙河街道施工噪音</h5>
                                    <p class="text-sm text-slate-500">22.5311°N, 113.9304°E | 噪音扰民</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <span class="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full">中密度</span>
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-location-arrow"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex items-center justify-between p-4 border border-slate-200 rounded-lg hover:bg-slate-50">
                            <div class="flex items-center space-x-4">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-trash text-blue-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">罗湖区东门街道垃圾堆放</h5>
                                    <p class="text-sm text-slate-500">22.5485°N, 114.1318°E | 市容管理</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded-full">低密度</span>
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-location-arrow"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 筛选面板折叠
        const toggleFilter = document.getElementById('toggleFilter');
        const filterContent = document.getElementById('filterContent');

        toggleFilter.addEventListener('click', () => {
            filterContent.classList.toggle('hidden');
            toggleFilter.innerHTML = filterContent.classList.contains('hidden') ? 
                '<i class="fas fa-chevron-down"></i>' : 
                '<i class="fas fa-chevron-up"></i>';
        });

        // 初始化地图
        const map = L.map('map').setView([22.5431, 114.0579], 11);

        // 添加地图图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // 自定义图标
        const redIcon = L.divIcon({
            className: 'custom-div-icon',
            html: '<div style="background-color: #ef4444; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
            iconSize: [12, 12],
            iconAnchor: [6, 6]
        });

        const yellowIcon = L.divIcon({
            className: 'custom-div-icon',
            html: '<div style="background-color: #eab308; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
            iconSize: [12, 12],
            iconAnchor: [6, 6]
        });

        const blueIcon = L.divIcon({
            className: 'custom-div-icon',
            html: '<div style="background-color: #3b82f6; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
            iconSize: [12, 12],
            iconAnchor: [6, 6]
        });

        // 模拟数据点
        const locations = [
            {lat: 22.5432, lng: 114.0579, type: 'high', title: '福田区梅林街道工厂废气排放', desc: '环境污染 - 高密度区域'},
            {lat: 22.5311, lng: 113.9304, type: 'medium', title: '南山区沙河街道施工噪音', desc: '噪音扰民 - 中密度区域'},
            {lat: 22.5485, lng: 114.1318, type: 'low', title: '罗湖区东门街道垃圾堆放', desc: '市容管理 - 低密度区域'},
            {lat: 22.5552, lng: 114.1098, type: 'high', title: '福田区华强北街道交通拥堵', desc: '交通问题 - 高密度区域'},
            {lat: 22.5267, lng: 113.9365, type: 'medium', title: '南山区科技园空气污染', desc: '环境污染 - 中密度区域'},
            {lat: 22.5356, lng: 114.0256, type: 'low', title: '福田区园岭街道设施损坏', desc: '市容管理 - 低密度区域'},
            {lat: 22.5428, lng: 114.0456, type: 'high', title: '福田区福田街道噪音污染', desc: '噪音扰民 - 高密度区域'},
            {lat: 22.5389, lng: 114.1234, type: 'medium', title: '罗湖区桂园街道水质问题', desc: '环境污染 - 中密度区域'}
        ];

        // 添加标记点到地图
        locations.forEach(loc => {
            let icon;
            switch(loc.type) {
                case 'high': icon = redIcon; break;
                case 'medium': icon = yellowIcon; break;
                case 'low': icon = blueIcon; break;
            }

            const marker = L.marker([loc.lat, loc.lng], {icon: icon}).addTo(map);
            
            // 添加弹窗
            marker.bindPopup(`
                <div class="custom-popup">
                    <h4 class="font-semibold text-slate-800 mb-2">${loc.title}</h4>
                    <p class="text-sm text-slate-600 mb-2">${loc.desc}</p>
                    <p class="text-xs text-slate-500">坐标: ${loc.lat}°N, ${loc.lng}°E</p>
                    <button class="mt-2 px-3 py-1 bg-indigo-600 text-white text-sm rounded hover:bg-indigo-700">
                        查看详情
                    </button>
                </div>
            `);
        });

        // 图层切换功能
        document.querySelectorAll('.bg-indigo-100, .hover\\:bg-slate-100').forEach((btn, index) => {
            if (btn.textContent.includes('标记点') || btn.textContent.includes('热力图') || btn.textContent.includes('聚类')) {
                btn.addEventListener('click', () => {
                    // 移除所有active状态
                    btn.parentElement.querySelectorAll('button').forEach(b => {
                        b.classList.remove('bg-indigo-100', 'text-indigo-700');
                        b.classList.add('hover:bg-slate-100');
                    });
                    // 添加active状态
                    btn.classList.add('bg-indigo-100', 'text-indigo-700');
                    btn.classList.remove('hover:bg-slate-100');
                    
                    // 这里可以切换不同的图层显示
                    console.log('切换到图层:', btn.textContent);
                });
            }
        });

        // 定位按钮功能
        document.querySelectorAll('.fa-location-arrow').forEach(btn => {
            btn.parentElement.addEventListener('click', () => {
                // 找到对应的坐标并定位
                const row = btn.closest('.flex');
                const coordText = row.querySelector('.text-slate-500').textContent;
                const coords = coordText.match(/(\d+\.\d+)°N, (\d+\.\d+)°E/);
                if (coords) {
                    const lat = parseFloat(coords[1]);
                    const lng = parseFloat(coords[2]);
                    map.setView([lat, lng], 15);
                }
            });
        });
    </script>
</body>
</html>